<template>
  <div class="">
    <div class="filter-container">
      <el-button class="filter-item" icon="el-icon-circle-plus-outline" @click="showDialog">新增</el-button>
    </div>
    <el-table
      :data="tableInfo.data"
      border
      style="width:100%"
      class="init_table">
      <el-table-column
        align="center"
        width="50"
        type="index"
        label="序号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="userName"
        label="姓名"
        :min-width="tableInfo.minWidth">
      </el-table-column>

      <el-table-column
        align="center"
        prop="userIdCard"
        label="身份证"
        :min-width="tableInfo.minWidth">
      </el-table-column>

      <el-table-column
        align="center"
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleRemoveData(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增成员" :visible.sync="dialogVisible" width="500px" top="10vh" modal="false" :modal="false">
      <el-form ref="submitForm" :rules="rules" :model="submitData" label-position="right"
               label-width="100px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="成员姓名：" prop="userId">
              <el-select style="width:100%"
                         v-model="submitData.userId"
                         filterable
                         remote
                         reserve-keyword
                         :remote-method="remoteMethod"
                         :loading="selectLoading">
                <el-option
                  v-for="item in selectUser"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {listCareUser} from '@/api/ele/careUser'
  import ele from '@/api/ele'
  import {handleRequest} from '@/utils/system'

  export default {
    name: 'CareMemberComponent',
    props: {
      groupId: {
        type: String
      }
    },
    data: () => ({
      dialogVisible: false,
      tableInfo: {data: []},
      submitData: {
        userId: null,
        groupId: null,
      },
      rules: {
        userId: [{required: true, message: '不能为空', trigger: 'change'}],
      },
      selectUser: [],
      selectLoading: false,

    }),
    watch:{
        groupId(){
          this.refreshTable();
        }
    },
    mounted() {
      this.refreshTable();
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.selectLoading = true
          handleRequest({
            method: listCareUser,
            data: {
              name: query,
              pageNum: 1,
              pageSize: 1000
            },
            successCall: (data) => {
              this.selectUser = data.rows
              this.selectLoading = false
            }
          })
        } else {
          this.selectUser = [];
        }
      },
      resetSubmitData() {
        this.submitData = {
          userId: null,
          groupId: this.groupId
        }
      },
      showDialog() {
        this.resetSubmitData()
        this.dialogVisible = true
        this.selectUser = []
        this.$nextTick(() => {
          this.$refs['submitForm'].clearValidate()
        })
      },
      handleAddData() {
        this.$refs['submitForm'].validate((valid) => {
          if (valid) {
            handleRequest({
              method: ele.careMember.add,
              data: this.submitData,
              operateType: "新增",
              warnAlertShow: true,
              successAlertShow: true,
              failAlertShow: true,
              successCall: () => {
                this.dialogVisible = false;
                this.refreshTable();
              }
            })
          }
        })
      }
      ,
      handleRemoveData(id) {
        handleRequest({
          method: ele.careMember.removeById,
          data: {id: id},
          operateType: "删除",
          warnAlertShow: true,
          successAlertShow: true,
          failAlertShow: true,
          successCall: () => {
            this.dialogVisible = false;
            this.refreshTable();
          }
        })
      },
      refreshTable() {
        handleRequest({
          method: ele.careMember.listByGroupId,
          data: {groupId: this.groupId},
          successCall: (data) => {
            this.tableInfo.data = data
          }
        })
      }
    }
  }
</script>
